<template>
  <van-cell-group class="cell-group">
    <van-cell :title="title" is-link :value="text" @click="show=true" />
    <van-popup v-model="show" class="popup" position="bottom">
      <div>
        <div class="van-hairline--top-bottom van-actionsheet__header">
          <div>{{title}}</div>
          <van-icon name="close" @click="onClose" />
        </div>
        <van-radio-group v-model="value">
          <van-cell-group>
            <van-cell
              v-for="(item,index) in items"
              :key="index"
              center
              :title="item.name"
              :label="item.label"
              clickable
              @click="onSelect(item.type)"
            >
              <van-radio slot="right-icon" :name="item.type" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="foot-btn-group">
        <van-button size="normal" block round type="default" @click="onClose">关闭</van-button>
      </div>
    </van-popup>
  </van-cell-group>
</template>

<script>
export default {
  data() {
    return {
      title: "支付方式",
      show: false,
      items: [
        { name: "在线支付", label: "支持余额、微信、支付宝、银行卡", type: 1 },
        { name: "货到付款", label: "收货时线下付款，更便捷", type: 0 }
      ]
    };
  },
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  computed: {
    text() {
      const { name } = this.items.filter(({ type }) => type == this.value)[0];
      return name;
    }
  },
  methods: {
    onClose() {
      this.show = false;
    },
    onSelect(type) {
      this.$emit("input", type);
      this.onClose();
    }
  }
};
</script>

<style scoped>
.cell-group {
  margin: 10px 0;
}
</style>